$(function () {
    // 渲染表格
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            let arr = []

            res.data.data.forEach(ele => {
                arr.push(`
            <tr>
                <td>${ele.Id}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                    <button  data-id="${ele.Id}" class="layui-btn  layui-btn layui-btn-xs" id="modify">修改</button>
                    <button  data-id="${ele.Id}" class="layui-btn layui-btn-danger layui-btn layui-btn-xs" id="del_btn">删除</button>
                </td>
            </tr>
            `)
            })

            $('tbody').empty().html(arr.join(''))
        })
    }

    var indexadd = 0
    var indexmodify = 0
    // 添加分类弹出层
    $('#addBtn').on('click', function () {
        indexadd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: `
            <form class="layui-form" action="" id="addForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    
                    <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            
            `
        });

    })


    // 表单验证
    layui.form.verify({

    })

    // 添加分类表单提交
    $('body').on('submit', '#addForm', function (e) {
        e.preventDefault()

        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status) {
                return layer.msg(res.data.message)
            }

            layer.msg('恭喜您,添加成功')
            layer.close(indexadd)
            initArtCateList()
        })
    })

    // 修改分类表单
    $('tbody').on('click', '#modify', function () {
        indexmodify = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: `
            <form class="layui-form" action="" id="addForm" lay-filter="layui-form">
                <input type="hidden" name="Id">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    
                    <div class="layui-input-block">
                    <button class="layui-btn confirm_modify" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                </div>
            </form>
            
            `
        });
        let id = $(this).attr('data-Id')
        axios({
            url: '/my/article/cates/' + id,
        }).then(res => {
            console.log(res.data);
            if (res.data.status) {
                return layer.msg(res.data.message)
            }

            //给表单赋值
            layui.form.val("layui-form", res.data.data);
        })
    })
    // 提交修改
    $('body').on('submit', '#addForm', function (e) {
        e.preventDefault()


        axios({
            url: '/my/article/updatecate',
            method: 'POST',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status) {
                return layer.msg(res.data.message)
            }

            layer.msg('恭喜您,修改成功')
            initArtCateList()
            layer.close(indexmodify)


        })
    })

    // 删除
    $('tbody').on('click', "#del_btn", function (e) {

        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            let id = $(e.target).attr('data-id')
            axios({
                url: '/my/article/deletecate/' + id
            }).then(res => {
                if (res.data.status) {
                    return layer.msg(res.data.message)
                }

                layer.msg('删除成功')
                initArtCateList()
            })

            layer.close(index);
        });
    })




})